<template>
  <div class="body">
    
       <el-row class="mb8">
            <el-col :span="19">
               <el-button @click="shuaxin" type="info" icon="el-icon-refresh-right"></el-button>
    <el-button type="primary"  @click="handleAdd">添加</el-button>
            </el-col>
            <el-col :span="5" class="seach">
                <el-input v-model="jigouName" placeholder="请输入文件名称"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="seach"></el-button>
            </el-col>
        </el-row>
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      class="table xinde"
      @selection-change="handleSelectionChange"
    >
      <el-table-column align="center" prop="id" label="员工编号">
        <!-- <template slot-scope="scope">{{ scope.id }}</template> -->
      </el-table-column>
      <el-table-column align="center" prop="cardname" label="员工姓名" ></el-table-column>
      <el-table-column align="center"  width="220" prop="nickname" label="员工手机号"></el-table-column>
      <el-table-column align="center"  width="220" prop="username" label="账号"></el-table-column>
      <el-table-column align="center" width="220" prop="" label="员工身份证正反面" ></el-table-column>
           <el-table-column align="center" width="220" prop="email" label="邮箱" ></el-table-column>
               <el-table-column align="center" prop="" label="岗位" ></el-table-column>
      <el-table-column  width="220" align="center" label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handlesc(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加 -->
    <el-dialog :title="title" :visible.sync="open"  width="50%"
      append-to-body
      :close-on-click-modal="false"
      v-dialogDrag
      custom-class="publicDialog">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
       
        <div style="display: flex; justify-content: center; margin-top: 20px">
          <div>
            <el-form-item label="账号">
              <el-input v-model="form.username"></el-input>
            </el-form-item>
            <el-form-item label="昵称">
              <el-input v-model="form.nickname"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="form.email"></el-input>
            </el-form-item>
            <el-form-item label="真实姓名">
              <el-input v-model="form.cardname"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="form.password"></el-input>
            </el-form-item>
            <el-form-item label="手机号码">
              <el-input v-model="form.mobile"></el-input>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="上传头像">
              <div class="upload_front">
                <div @click="dialogVisible = true" v-if="imageUrl">
                  <img class="avatar" :src="imageUrl" alt />
                </div>
                <el-upload
                  v-else
                  name="image"
                  class="avatar-uploader"
                  action="https://apply.hnzyxsbh.com/api/Baohan/upload"
                  :show-file-list="false"
                  :on-success="handleSuccess"
                >
                  <div class="avatar-uploader-icon">
                    <i class="el-icon-plus"></i>
                    <span>证件照片</span>
                  </div>
                </el-upload>
                <div class="upload_right">
                  <i @click="imageUrl = null" v-if="imageUrl" class="el-icon-close"></i>
                </div>
              </div>
            </el-form-item>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="身份证照片">
                  <div class="upload_front">
                    <div @click="dialogVisible1 = true" v-if="imageUrl1">
                      <img class="avatar" :src="imageUrl1" alt />
                    </div>
                    <el-upload
                      v-else
                      name="image"
                      class="avatar-uploader"
                      action="https://apply.hnzyxsbh.com/api/Baohan/upload"
                      :show-file-list="false"
                      :on-success="handleSuccess1"
                      :on-remove="handleRemove"
                    >
                      <div class="avatar-uploader-icon">
                        <i class="el-icon-plus"></i>
                        <span>人像面</span>
                      </div>
                    </el-upload>
                    <div class="upload_right">
                      <i @click="imageUrl1 = null" v-if="imageUrl1" class="el-icon-close"></i>
                    </div>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item>
                  <div class="upload_front">
                    <div @click="dialogVisible2 = true" v-if="imageUrl2">
                      <img class="avatar" :src="imageUrl2" alt />
                    </div>
                    <el-upload
                      v-else
                      name="image"
                      class="avatar-uploader"
                      action="https://apply.hnzyxsbh.com/api/Baohan/upload"
                      :show-file-list="false"
                      :on-success="handleSuccess2"
                      :on-remove="handleRemove"
                    >
                      <img v-if="imageUrl2" :src="imageUrl2" class="avatar" />
                      <div v-else class="avatar-uploader-icon">
                        <i class="el-icon-plus"></i>
                        <span>国徽面</span>
                      </div>
                    </el-upload>
                    <div class="upload_right">
                      <i @click="imageUrl2 = null" v-if="imageUrl2" class="el-icon-close"></i>
                    </div>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>
        <div style="display: flex; justify-content: center">
          <el-button @click="onSubmit" type="primary">确定</el-button>
          <!-- <el-button style="margin: 0px;" type="primary" >确定</el-button> -->
          <el-button @click="cancel">取消</el-button>
        </div>
      </el-form>
    </el-dialog>
    <!-- 修改 -->
    <el-dialog :title="title" :visible.sync="open1"  width="50%"
      append-to-body
      :close-on-click-modal="false"
      v-dialogDrag
      custom-class="publicDialog">
      <!-- {{this.form}} -->
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <div style="display: flex; justify-content: center; margin-top: 20px">
          <div>
            <el-form-item label="昵称">
              <el-input v-model="form.nickname"></el-input>
            </el-form-item>
            <el-form-item label="上传头像">
              <div class="upload_front">
                <div @click="dialogVisible = true" v-if="imageUrl">
                  <img class="avatar" :src="imageUrl" alt />
                </div>
                <el-upload
                  v-else
                  name="image"
                  class="avatar-uploader"
                  action="https://apply.hnzyxsbh.com/api/Baohan/upload"
                  :show-file-list="false"
                  :on-success="handleSuccess"
                >
                  <div class="avatar-uploader-icon">
                    <i class="el-icon-plus"></i>
                    <span>头像</span>
                  </div>
                </el-upload>
                <div class="upload_right">
                  <i @click="imageUrl = null" v-if="imageUrl" class="el-icon-close"></i>
                </div>
              </div>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="邮箱">
              <el-input v-model="form.email"></el-input>
            </el-form-item>
            <el-form-item label="手机号码">
              <el-input v-model="form.mobile"></el-input>
            </el-form-item>
          </div>
        </div>
        <div style="display: flex; justify-content: center">
          <el-button @click="onSubmit" type="primary">确定</el-button>
          <!-- <el-button style="margin: 0px;" type="primary" >确定</el-button> -->
          <el-button @click="open1= false">取消</el-button>
        </div>
      </el-form>
    </el-dialog>
    <div class="block">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10,20,30]"
        :page-size="params.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>
  
  <script>
import { stafflist, staffadd, staffdel, staffedit } from "@/api/staff.js";
export default {
  data() {
    return {
      // 上传头像 身份证
      imageUrl: "",
      imageUrl1: "",
      imageUrl2: "",
      dialogImageUrl: "",
      dialogVisible: false,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      open1: false,
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      options1: [], //选择部门
      options2: [], //选择职位
      options3: [
        {
          value: "HTML",
          label: "HTML"
        },
        {
          value: "CSS",
          label: "CSS"
        },
        {
          value: "JavaScript",
          label: "JavaScript"
        }
      ], //选择小组
      tableData: [],
      multipleSelection: [],
      //列表参数
      params: {
        offset: 0, //每页开始的第一条
        limit: 10, //显示多少条
        keywords: "" //关键字
      },
      total: null
    };
  },
  created() {
    this.getSaffList();
  },
  methods: {
    shuaxin(){
 this.getSaffList();
    },
    format(shijianchuo) {
      //shijianchuo是整数，否则要parseInt转换
      var time = new Date(shijianchuo);
      var y = time.getFullYear();
      var m = time.getMonth() + 1;
      var d = time.getDate();
      var h = time.getHours();
      var mm = time.getMinutes();
      var s = time.getSeconds();
      return y + "-" + m + "-" + d + " " + h + ":" + mm + ":" + s;
    },
    getSaffList() {
      // this.params.user_id = sessionStorage.getItem("user_id");
      stafflist(this.params).then(response => {
        var bbc = response.data.data.rows;
        this.tableData = bbc;
        this.total = response.data.data.total;
      });
    },
    // 表单重置
    reset() {
      this.form = {};
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    //新增按钮操作
    handleAdd() {
      this.reset();
      this.imageUrl = null;
      this.open = true;
      this.title = "添加员工";
    },
    //修改
    handleUpdate(e) {
      console.log(e);
      this.imageUrl = e.avatar;
      this.form.id = e.id;
      this.form.email = e.email;
      this.form.mobile = e.mobile;
      this.form.nickname = e.nickname;
      this.open1 = true;
      this.title = "修改员工信息";
    },
    handlesc(e) {
      console.log(e);
      let query = {};
      // query.user_id = sessionStorage.getItem("user_id");
      query.id = e.id;
      this.$confirm("此操作将删除该员工, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          staffdel(query).then(response => {
            if (response.data.code == 1) {
              this.$message.success("删除成功");
              this.getSaffList()
            } else {
              this.$message.error("删除失败");
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //提交按钮
    onSubmit() {
      if (this.title == "修改员工信息") {
        // this.form.user_id = sessionStorage.getItem('user_id')
        staffedit(this.form).then(res => {
          if (res.data.code == 1) {
            this.$message.success("修改成功");
            this.open1 = false;
            this.getSaffList()
          } else {
            this.$message.error("修改失败");
          }
        });
      } else {
        // let user_id = sessionStorage.getItem("user_id");
        // this.form.user_id = user_id;

        staffadd(this.form).then(response => {
          if (response.data.code == 1) {
            this.$message.success("添加成功");
            this.getSaffList();
          } else {
            this.$message.error(response.data.msg);
          }
        });

        this.open = false;
      }
    },

    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      this.params.limit = val;
      this.getSaffList(this.params);
    },
    handleCurrentChange(val) {
      this.params.offset = parseInt(val - 1) * 10;
      this.getSaffList(this.params);
    },
    handleSuccess(response, file, fileList) {
      this.imageUrl = this.$baseUrl + "" + response.data;
      this.form.avatar = response.data;
    },
    handleSuccess1(response, file, fileList) {
      this.imageUrl1 = response.data;
      this.imageUrl1 = this.$baseUrl + "" + response.data;
      this.form.front = response.data;
    },
    handleSuccess2(response, file, fileList) {
      this.imageUrl2 = response.data;
      this.imageUrl2 = this.$baseUrl + "" + response.data;
      this.form.back = response.data;
    }
  }
};
</script>
  <style>

  <style scoped >
.body {
  /* width: 86vw;
  height: 91vh; */
}

.table {
  width: 100%;
  margin-top: 2vh;
}
/* 上传图片样式 */
.avatar-uploader .el-upload {
  border: 1px dashed #ccc;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  /* display: flex;
  justify-content: center;
  align-items: center; */
}
.avatar-uploader .el-upload {
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader-icon {
  background: rgba(0, 0, 0, 0.02);
  border-radius: 4px 4px 4px 4px;
  border: 1px dashed rgba(0, 0, 0, 0.15);
  font-size: 14px;
  color: #8c939d;
  width: 204px;
  height: 138px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.el-icon-plus {
  font-size: 28px;
}
.avatar {
  width: 204px;
  height: 138px;
  display: block;
}
.upload_right {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
.upload_front {
  display: flex;
}
.update {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.block {
  position: fixed;
  bottom: 20px;
  right: 20px;
}
</style>
  